<template>
    <f7-page>
        <f7-toolbar class="app-toolbar" tabbar labels bottom>
            <f7-link tab-link="#home" tab-link-active icon="iconfont icon-shouye-weixuanzhong" text="首页"></f7-link>
            <f7-link tab-link="#activity" icon="iconfont icon-duihuan" text="活动"></f7-link>
            <f7-link tab-link="#openPositions" icon="iconfont icon-chicang" text="持仓"></f7-link>
            <f7-link tab-link="#my" icon="iconfont icon-wode" text="我的"></f7-link>
        </f7-toolbar>

        <f7-tabs>
            <f7-tab id="home" tab-active>
                <home-page></home-page>
            </f7-tab>
            <f7-tab id="activity">
                <activity-page></activity-page>
            </f7-tab>
            <f7-tab id="openPositions" @tab:show="$refs.position.init()">
                <open-positions-page ref="position"></open-positions-page>
            </f7-tab>
            <f7-tab id="my">
                <my-page></my-page>
            </f7-tab>
        </f7-tabs>
    </f7-page>
</template>

<script>
    import HomePage from './home';
    import ActivityPage from './activity';
    import OpenPositionsPage from './open-positions';
    import MyPage from './my'
    export default {
        name: "tabs",
        components: {
            HomePage,
            ActivityPage,
            OpenPositionsPage,
            MyPage
        }
    }
</script>

<style scoped>

</style>